$(document).ready(function () {
    let courseData;

    // 使用$.ajax加载JSON文件
    $.ajax({
        url: 'http://10.2.1.17:8099/EXOnline/font/courses?method=structurequery&pageno=1&condition=tfree', // 替换为实际的接口地址
        type: 'GET',
        dataType: 'json',
        success: function (jsonData) {
            courseData = jsonData.data;  // 接口返回的实际课程数据在data字段下

            console.log(courseData);
            // 动态生成方向菜单
            initDirectionMenu();
            // 动态生成分类菜单
            initCategoryMenu();
            // 初始化页面加载时显示全部课程（默认全部显示）
            initAllCourses();
            // 绑定方向菜单点击事件
            $('#directionMenu').on('click', 'li', function () {
                var direction = $(this).data('direction');
                updateCourseDisplay(direction, null, null);
                // 更新选中状态并切换样式
                $('#directionMenu li').removeClass('active');
                $(this).addClass('active');
                // 根据一级菜单切换二级菜单数据
                updateCategoryMenu(direction);

                // 确保分类菜单中的“全部”项被选中
                $('#categoryMenu li').removeClass('active'); // 清除所有分类的选中状态
                $('#categoryMenu li[data-category="all"]').addClass('active'); // 确保“全部”项被选中
                updateCourseDisplay(direction, 'all', null); // 确保显示所有课程
            });
            // 绑定分类菜单点击事件
            $('#categoryMenu').on('click', 'li', function () {
                var category = $(this).data('category');
                var currentDirection = $('#directionMenu li.active').data('direction');
                updateCourseDisplay(currentDirection, category, null);
                // 更新选中状态并切换样式
                $('#categoryMenu li').removeClass('active');
                $(this).addClass('active');
            });


        },
        error: function (xhr, status, error) {
            console.log('Error:', status, error);
        }
    });

    function initAllCourses() {
        // 先清空之前的课程展示内容
        $('.tab-content-1 ul').empty();
        let allCategories = [];
        courseData.forEach(directionObj => {  // 这里遍历方向数据
            directionObj.subjects.forEach(subject => {  // 再遍历学科数据
                allCategories.push(...subject.courses);  // 获取所有课程
            });
        });
        allCategories.forEach(course => {
            let li = $('<li></li>');
            let a = $('<a>', {
                href: "courselearning.html?id=" + course.id,
                target: "_blank"
            });
            let img = $('<img>', {
                src: course.cover,  // 使用课程数据中的cover字段作为图片路径
                alt: "课程图片"
            });
            let h1 = $('<h1>').text(course.cname);
            let h2 = $('<h2>').text(course.leve);
            let priceText = course.cprice === "0.00" ? "免费" : "￥" + course.cprice;
            let p = $('<p>').text(priceText);
            a.append(img, h1, h2, p);
            li.append(a);
            $('.tab-content-1 ul').append(li);
        });
    }

    function initDirectionMenu() {
        let directionMenu = $('#directionMenu');
        let allDirectionLi = $('<li data-direction="all">全部</li>');
        directionMenu.append(allDirectionLi);
        courseData.forEach(directionObj => {
            let directionLi = $('<li data-direction="' + directionObj.directionName + '">' + directionObj.directionName + '</li>');
            directionMenu.append(directionLi);
        });
        // 设置默认第一个方向为选中状态（可根据需求调整）
        allDirectionLi.addClass('active');
    }

    function initCategoryMenu() {
        let categoryMenu = $('#categoryMenu');
        let allCategoryLi = $('<li data-category="all">全部</li>');
        categoryMenu.append(allCategoryLi);
        courseData.forEach(directionObj => {
            directionObj.subjects.forEach(subject => {
                let categoryLi = $('<li data-category="' + subject.subjectName + '">' + subject.subjectName + '</li>');
                categoryMenu.append(categoryLi);
            });
        });
        // 设置默认第一个分类为选中状态（可根据需求调整）
        allCategoryLi.addClass('active');
    }

    function updateCourseDisplay(direction, category, difficulty) {
        $('.tab-content-1 ul').empty();
        let targetCategories = [];

        // 先根据方向筛选（如果选择了具体方向）
        if (direction !== 'all') {
            let targetDirection = courseData.find(dir => dir.directionName === direction);
            if (targetDirection) {
                targetDirection.subjects.forEach(subject => {
                    targetCategories.push(...subject.courses);
                });
            }
        } else {
            // 如果方向是全部，则获取所有分类下的课程
            courseData.forEach(directionObj => {
                directionObj.subjects.forEach(subject => {
                    targetCategories.push(...subject.courses);
                });
            });
        }

        // 再根据当前选中的分类进行筛选（重点修改部分，确保基于正确分类查找）
        if (category !== 'all') {
            targetCategories = targetCategories.filter(course => course.csubject === category);
        }


        // 填充课程展示内容，确保数据存在才进行添加操作
        targetCategories.forEach(course => {
            let li = $('<li></li>');
            let a = $('<a>', {
                href: "#",
                target: "_blank"
            });
            let img = $('<img>', {
                src: course.cover,  // 使用课程数据中的cover字段作为图片路径
                alt: "课程图片"
            });
            let h1 = $('<h1>').text(course.cname);
            let h2 = $('<h2>').text(course.leve);
            let priceText = course.cprice === "0.00" ? "免费" : "￥" + course.cprice;
            let p = $('<p>').text(priceText);
            a.append(img, h1, h2, p);
            li.append(a);
            $('.tab-content-1 ul').append(li);
        });
    }

    function updateCategoryMenu(selectedDirection) {
        $('#categoryMenu').empty();
        let allCategoryLi = $('<li data-category="all">全部</li>');
        $('#categoryMenu').append(allCategoryLi);
        if (selectedDirection === 'all') {
            courseData.forEach(directionObj => {
                directionObj.subjects.forEach(subject => {
                    let categoryLi = $('<li data-category="' + subject.subjectName + '">' + subject.subjectName + '</li>');
                    $('#categoryMenu').append(categoryLi);
                });
            });
        } else {
            let targetDirection = courseData.find(dir => dir.directionName === selectedDirection);
            if (targetDirection) {
                targetDirection.subjects.forEach(subject => {
                    let categoryLi = $('<li data-category="' + subject.subjectName + '">' + subject.subjectName + '</li>');
                    $('#categoryMenu').append(categoryLi);
                });
            }
        }
        // 设置默认第一个分类为选中状态（可根据需求调整）
        allCategoryLi.addClass('active');
    }
});